<template>
	<div class="bigdiv" v-show="showState" >
			<div class="dltitle">登录
			<div class="revert" @click="change" ></div>
			</div>
			<div class="jump">	
				<div class="register" v-on:click="changezc">新用户注册</div>
				<div class="login" @click="changedl">手机号登录</div>
			</div>
			<div class="other">
				第三方账号登录/注册
				<div class="mode">
					<div class="modes">
						<img src="../../img/wxin.png"/>
						<p>微信</p>
					</div>
					<div class="modes">
						<img src="../../img/xlwb.png"/>
						<p>新浪微博</p>
					</div>
					<div class="modes">
						<img src="../../img/txqq.png"/>
						<p>QQ</p>
					</div>
					<div class="modes">
						<img src="../../img/txwb.png"/>
						<p>腾讯微博</p>
					</div>
				</div>
			</div>
		</div>
</template>

<script>
	
		export default {
		computed: {
			showState(){
				// 获取仓库当中的状态值
				return this.$store.state.loginState;
			}
		},
		methods:{
			change(){
				this.$store.commit('changeState');
			},
			changezc(){
				this.$store.commit('changeZhuce');
			},
			changedl(){
				this.$store.commit('changeDenglu');
			}
		}
	}
</script>

<style scoped="scoped">
		.bigdiv{
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 1111111;
				background-color: #fff;
			}
			
			.dltitle{
				width: 100%;
				height: 1.413043rem;
				line-height: 1.413043rem;
				text-align: center;
				font-size: 0.521739rem;
				position: relative;
				background-color: #fbfbfb;
				
			}
			
			.revert{
				width: 0.434782rem;
				height: 0.652173rem;
				position: absolute;
				top: 0.4rem;
				left: 0.434782rem;
				background: url(../../img/lfjt.png) center center no-repeat;
				background-size: 100%;
			}
			.jump{
				width: 100%;
				height: 5.195652rem;
				background: url(../../img/qtfmtx.png) center 20% no-repeat;
				background-size: 20%;
				padding-top: 70%;
			}
			.register{
				width: 6.086956rem;
				height: 1.086956rem;
				line-height: 1.086956rem;
				color: #fff;
				background-color: #e6524e;
				margin-left: 20%;
				border-radius: 0.217391rem;
				text-align: center;
			}
			.login{
				width: 6.086956rem;
				height: 1.086956rem;
				line-height: 1.086956rem;
				color: #e6524e;
				background-color: #fff;
				margin-left: 20%;
				border-radius: 0.217391rem;
				margin-top: 0.652173rem;
				text-align: center;
				border: solid 0.021739rem #b38381;
			}
			.other{
				width: 100%;
				height: 4.108695rem;
				text-align: center;
				color: #d0d0d0;
			}
			.mode{
				width: 100%;
				height: 2.173913rem;
				margin-top: 1.086956rem;
				display: flex;
				color: #5f5f5f;
				
			}
			.modes{
				width: 25%;
			}
			.modes p{
				margin-top: 0.108695rem;
			}
</style>